<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img id="img" src="http://qiniu.seefly.top/step2_1583919080622.jpg" >
<div id="div" style="width: 20px;height: 20px;background-color: red"></div>
<div  style="margin-top: 2000px;width: 20px;height: 20px;background-color: red"></div>
<script>
    /**
     *  UI（ User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
     *  焦点事件，当元素获得或失去焦点时触发；
     *  鼠标事件，当用户通过鼠标在页面上执行操作时触发；
     *  滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
     *  文本事件，当在文档中输入文本时触发；
     *  键盘事件，当用户通过键盘在页面上执行操作时触发；
     *  合成事件，当为 IME（ Input Method Editor，输入法编辑器）输入字符时触发；
     *  变动（ mutation）事件，当底层 DOM 结构发生变化时触发。
     *  变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们，
     * 因此本章不做介绍。
     */


    /*******************************************UI事件******************************************************/

    // load事件
    // 页面内容全部加载完毕(js/css/img...)之后会触发window上的load事件
    window.addEventListener('load',function () {
        alert('页面所有资源加载完毕！')
    });
    document.getElementById('img').addEventListener('load',function () {
        alert('图片资源加载完毕！：'+event.target.src)
    });

    //unload事件
    document.body.addEventListener('unload',function () {
        alert('页面卸载！')
    });

    // resize事件
    window.addEventListener('resize',function () {
        alert('页面被调整大小了')
    });
    window.addEventListener('scroll',function () {
        //margin-top: 2000px;
        var div = document.getElementById('div');
        div.style.marginTop = event.target.documentElement.scrollTop+'px';
        console.info(event.target.documentElement.scrollTop)
    })

    /*******************************************鼠标和滚轮事件******************************************************/
    /**
     * click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保
     *  易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。
     *  dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不
     *    是 DOM2 级事件规范中规定的，但鉴于它得到了广泛支持，所以 DOM3 级事件将其纳入了标准。
     *  mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
     *  mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且
     *   在光标移动到后代元素上不会触发。 DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它
     *   纳入了规范。 IE、 Firefox 9+和 Opera 支持这个事件。
     *  mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且
     *   在光标移动到后代元素上不会触发。 DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它
     *   纳入了规范。 IE、 Firefox 9+和 Opera 支持这个事件。
     *  mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
     *  mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另
     *   一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
     *  mouseover：在*鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触
     *   发。不能通过键盘触发这个事件。
     *  mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。
     *
     */

</script>

</body>
</html>